<template>
  <el-dialog
    title="锁定号源记录"
    :visible.sync="dialogVisible"
    class="ky-small-dialog"
    width="75%"
    top="8vh"
    :before-close="handleClose"
  >
    <el-form ref="from" inline :model="formData" class="ky-form-inline ky-form-inline-sm">
      <el-form-item label="影像区域" prop="depArea">
        <el-select
          size="small"
          class="param-type_input"
          v-model="formData.depArea"
          multiple
          placeholder="请选择"
          clearable
          collapse-tags
          @change="handleChange('depArea')"
        >
          <el-option
            v-for="(item, index) in depAreaOptions"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查部门" prop="dep">
        <el-select
          size="small"
          class="param-type_input"
          v-model="formData.dep"
          multiple
          placeholder="请选择"
          clearable
          collapse-tags
          @change="handleChange('dep')"
        >
          <el-option
            v-for="(item, index) in scheduledDepOptions"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查设备" prop="modality">
        <el-select
          size="small"
          class="param-type_input"
          v-model="formData.modality"
          multiple
          placeholder="请选择"
          clearable
          collapse-tags
          @change="handleChange('modality')"
        >
          <el-option
            v-for="(item, index) in modalityOptions"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查机房" prop="checkRoom">
        <el-select
          size="small"
          class="param-type_input"
          v-model="formData.checkRoom"
          multiple
          placeholder="请选择"
          clearable
          collapse-tags
        >
          <el-option
            v-for="(item, index) in checkRoomOptions"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查日期" prop="timeRange">
        <el-date-picker
          v-model="formData.timeRange"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="m-l-0 m-t-1"
          size="small"
          @click="search"
          plain
        ><i class="el-icon-search"></i>查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      class="ky-table"
      size="small"
      :data="tableData"
      style="width: 100%"
      border
    >
      <!-- <el-table-column prop="ruleInfoId" label="规则id"> </el-table-column> -->
      <!-- <el-table-column prop="listDmbId" label="号源时段id"></el-table-column> -->
      <el-table-column align="left" prop="hospitalName" label="医院名称" width="180">
        <template slot-scope="scope">{{scope.row.hospitalCode | hospitalCodeFlr(mx_hospitalList)}}</template>
      </el-table-column>
      <el-table-column prop="depArea" label="影像区域"></el-table-column>
      <el-table-column prop="dep" label="检查部门"></el-table-column>
      <el-table-column prop="modality" label="检查设备"></el-table-column>
      <el-table-column prop="checkRoom" label="检查机房"></el-table-column>
      <el-table-column prop="appointmentDate" label="检查时间" width="200px" :formatter="fmtDate"></el-table-column>
      <el-table-column prop="checkClass" label="检查班次"></el-table-column>
      <!--  <el-table-column prop="beginTime" label="检查开始时间" width="95px"></el-table-column>
      <el-table-column prop="endTime" label="检查结束时间" width="95px"></el-table-column> -->
      <el-table-column prop="reservedNum" label="已锁定数量" width="85px"></el-table-column>
      <el-table-column prop="initialNum" label="初始号码"></el-table-column>
      <el-table-column prop="checkNum" label="检查数量"></el-table-column>
      <el-table-column prop="reserveNum" label="预留数量"></el-table-column>
      <el-table-column prop="addNum" label="追加数量"></el-table-column>
      <el-table-column prop="callNum" label="已预约数量" width="95px"></el-table-column>
      <el-table-column label="操作" width="110px">
        <template slot-scope="scope">
          <el-button size="mini" @click="gotoDetail(scope.row)">号源详情</el-button>
        </template>
      </el-table-column>
      <!--  <el-table-column prop="createTime" label="创建时间" width="150px"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" width="150px"></el-table-column> -->
    </el-table>
    <paginationCont
      :total="totalCount"
      :page.sync="currentPage"
      :limit.sync="pageSize"
      @pagination="fetchData"
    />
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  appointmentruledmbGetpages,
  getDepAreaList,
  getDepList,
  getModalityList,
  getCheckRoomList
} from '@/api/api.js'
import { depSalt, modalitySalt } from '@/api/room'
import paginationCont from '@/components/Pagination/index'

export default {
  name: 'SourceInfoDialog',
  components: {
    paginationCont
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    hospitalCode: {
      type: String,
      default: ''
    },
    ruleInfoId: {
      type: String,
      default: ''
    }
  },
  filters: {
    hospitalCodeFlr: (val, arg1) => {
      if (!val) return ''
      let obj = arg1.find((item) => {
        return item.code === val
      })
      if (obj) {
        return obj.name
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      loading: false,
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      tableData: [],
      formFlag: false,
      dialogVisible: false,
      formData: {
        hospitalCode: '',
        ruleInfoId: '',
        appointmentBeginDate: '',
        appointmentEndDate: '',
        depArea: '',
        dep: '',
        modality: '',
        checkRoom: ''
      },
      depAreaOptions: [],
      scheduledDepOptions: [],
      modalityOptions: [],
      checkRoomOptions: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    visible: {
      async handler(val) {
        this.dialogVisible = this.visible
        if (val) {
          this.formData.hospitalCode = this.hospitalCode
          this.formData.ruleInfoId = this.ruleInfoId
          await this.$getHospitalList()
          this.search()
          this.handleChange('hospital')
        }
      }
    }
  },
  created() {
  },
  methods: {
    fmtDate(row, column, cellValue, index) {
      return row.appointmentDate.substring(0, 10) + ' ' + row.beginTime + '~' + row.endTime
    },
    search() {
      this.currentPage = 1
      this.fetchData()
    },
    fetchData() {
      let params = {
        ...this.formData,
        appointmentBeginDate: this.formData.timeRange ? this.formData.timeRange[0] : null,
        appointmentEndDate: this.formData.timeRange ? this.formData.timeRange[1] : null,
        depArea: this.formData.depArea ? this.formData.depArea[0] : null,
        dep: this.formData.dep ? this.formData.dep[0] : null,
        modality: this.formData.modality ? this.formData.modality[0] : null,
        checkRoom: this.formData.checkRoom ? this.formData.checkRoom[0] : null,
        pageNumber: this.currentPage,
        pageSize: this.pageSize
      }
      delete params.timeRange
      this.loading = true
      appointmentruledmbGetpages(params).then((res) => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tableData = res.content.list
          this.totalCount = res.content.totalCount
        }
      })
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleReset() {
      this.$refs.from.resetFields()
    },
    getDepAreaOptions() {
    /* 影像区域列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode
      }
      return new Promise(async (resolve) => {
        await getDepAreaList(params).then((res) => {
          if (res.code === 10000) {
            this.depAreaOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getScheduledDepOptions() {
    /* 检查部门列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(',')
      }
      return new Promise(async (resolve) => {
        await getDepList(params).then((res) => {
          if (res.code === 10000) {
            this.scheduledDepOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getModalityOptions() {
    /* 检查设备列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(',')
      }
      return new Promise(async (resolve) => {
        await getModalityList(params).then((res) => {
          if (res.code === 10000) {
            this.modalityOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getCheckRoomOptions() {
    /* 检查机房列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(','),
        modality: this.formData.modality.join(',')
      }
      return new Promise(async (resolve) => {
        await getCheckRoomList(params).then((res) => {
          if (res.code === 10000) {
            this.checkRoomOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    async handleChange(val) {
      switch (val) {
        case 'hospital':
          this.depAreaOptions = []
          this.scheduledDepOptions = []
          this.modalityOptions = []
          this.checkRoomOptions = []

          this.formData.depArea = []
          this.formData.dep = []
          this.formData.modality = []
          this.formData.checkRoom = []
          this.tableData = []
          this.totalCount = 0

          try {
            this.getDepAreaOptions()
            this.getScheduledDepOptions()
            this.getModalityOptions()
            this.getCheckRoomOptions()
            this.search()
          } catch (err) {
            console.log(err)
          }
          break
        case 'depArea':
          this.scheduledDepOptions = []
          this.modalityOptions = []
          this.checkRoomOptions = []
          this.formData.dep = []
          this.formData.modality = []
          this.formData.checkRoom = []
          try {
            this.getScheduledDepOptions()
            this.getModalityOptions()
            this.getCheckRoomOptions()
          } catch (err) {
            console.log(err)
          }
          break
        case 'dep':
          this.modalityOptions = []
          this.checkRoomOptions = []
          this.formData.modality = []
          this.formData.checkRoom = []
          try {
            this.getModalityOptions()
            this.getCheckRoomOptions()
          } catch (err) {
            console.log(err)
          }
          break
        case 'modality':
          this.checkRoomOptions = []
          this.formData.checkRoom = []
          try {
            this.getCheckRoomOptions()
          } catch (err) {
            console.log(err)
          }
          break
        default:
          break
      }
    },
    gotoDetail(row) {
      const params = {
        // hospitalCode: row.hospitalCode,
        listDmbId: row.listDmbId,
        appoTime: row.appointmentDate,
        // depArea: row.depArea,
        // dep: row.dep,
        modality: row.modality
        // checkRoom: row.checkRoom
      }
      const checkRoomSalt = [row.hospitalCode, row.depArea, depSalt + row.dep, modalitySalt + row.modality, row.checkRoom]
      this.$store.dispatch('user/resetDefaultCheckRoom', checkRoomSalt)
      this.$router.push({ path: '/schedule/manage', query: { ...params }})
    }
  }
}
</script>
<style scoped>
.floatR {
  float: right;
}
.marginL {
  margin-left: 10px;
}
</style>
